<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.adminset') }}</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('admin-save')" @click="btnOk">保存</el-button>
        </template>
      </PageTitle>
      <el-row :span="24" style="margin-top: 20px;">
        <div class="shopOrder-dialog">
          <el-form ref="ruleForm" :model="list" label-width="180px" :rules="rules">
            <el-form-item label="基地申请文件" prop="application_form">
              <ImagesUpload ref="application_form" />
            </el-form-item>
            <el-form-item label="实习人员导入模版" prop="practice_form">
              <ImagesUpload ref="practice_form" />
            </el-form-item>
            <el-form-item label="申报规则与说明" prop="explain">
              <ImagesUpload ref="explain" />
            </el-form-item>
          </el-form>
        </div>

      </el-row>
    </div>
  </div>
</template>
<script>
import { GetAdminSet, EditAdminSet } from '@/api/user'
export default {
  data() {
    return {
      list: {},
      listApp: [],
      rules: {}
    }
  },
  created() {
    this.getUserAdmin()
  },
  methods: {
    // 监听单选
    tanRadio() {
      
    },
    // 获取选择的值
    change(e) {
      this.listApp.forEach(element => {
        if (e === 0) {
          this.formData.type = 3
          return
        }
        if (element.id === e) {
          this.list.type = element.type
          this.list.page = element.page
          this.list.url_type = element.url_type
        }
      })
    },
    // 获取系统基本设置
    async getUserAdmin() {
      const one = {
        id: 1
      }
      const { list } = await GetAdminSet(one)
      this.list = list
      console.log(this.list)
      this.openDialog()
    },
    // 点击确定时
    async btnOk() {
      try {
        // 校验整个表单
        await this.$refs.ruleForm.validate()
        // 读取上传组件的数据
        const fileList = this.$refs.application_form.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const application_form = []
        for (let i = 0; i < fileList.length; i++) {
          application_form.push(fileList[i].url)
        }
        this.list.application_form = application_form.toString(',')
        // 读取上传组件的数据
        const fileList1 = this.$refs.practice_form.fileList
        // 循环判断是否已经完成全部上传
        if (fileList1.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const practice_form = []
        for (let i = 0; i < fileList1.length; i++) {
          practice_form.push(fileList1[i].url)
        }
        this.list.practice_form = practice_form.toString(',')
        // 读取上传组件的数据
        const fileList2 = this.$refs.explain.fileList
        // 循环判断是否已经完成全部上传
        if (fileList2.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const explain = []
        for (let i = 0; i < fileList2.length; i++) {
          explain.push(fileList2[i].url)
        }
        this.list.explain = explain.toString(',')
        // 调用新增接口
        await EditAdminSet(this.list)
        // 更新数据
        this.getUserAdmin()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 给图片赋值
    openDialog() {
      if (this.list.application_form) {
        const imgUrl = this.list.application_form.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const startIndex = item.lastIndexOf('/') + 1
          const one = {
            url: item,
            upload: true,
            name: item.substring(startIndex)
          }
          NewArr.push(one)
        })
        this.$refs.application_form.fileList = NewArr
      }
      if (this.list.application_form) {
        const imgUrl = this.list.practice_form.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const startIndex = item.lastIndexOf('/') + 1
          const one = {
            url: item,
            upload: true,
            name: item.substring(startIndex)
          }
          NewArr.push(one)
        })
        this.$refs.practice_form.fileList = NewArr
      }
      if (this.list.explain) {
        const imgUrl = this.list.explain.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const startIndex = item.lastIndexOf('/') + 1
          const one = {
            url: item,
            upload: true,
            name: item.substring(startIndex)
          }
          NewArr.push(one)
        })
        this.$refs.explain.fileList = NewArr
      }
    }
  }
}
</script>
<style lang="scss">
  .el-table{
    margin-top:30px
  }
  .tishi{
    font-size: 12px;
    color: #999;
    margin-left: 10px;
    font-style: normal;
  }
  .shopOrder-dialog{
  height: auto;
  max-height: 650px;
  overflow-y: auto;
  .editor{
    width: 500px;
  }
}
</style>
